<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"
      layout:decorator="layout/blank"><!-- layout文件路径-->

<head>
    <!-- META SECTION -->
    <title>练一练</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <!-- END META SECTION -->
    <style>
        .profile .profile-image img{
            border-radius: 0px !important;
        }
    </style>
</head>

<body>
<!-- PAGE CONTENT -->
<div layout:fragment="content">
    <!-- START X-NAVIGATION VERTICAL -->

    <!-- END X-NAVIGATION VERTICAL -->
    <!-- START BREADCRUMB -->
    <ul class="breadcrumb">
        <li><a href="#">Home</a></li>
        <li><a href="/memberCard/list">课程中心</a></li>
        <li><a th:href="'/unit/list?levelId='+${levelId}">单元列表</a></li>
        <li class="active">问题列表</li>
    </ul>
    <!-- END BREADCRUMB -->
    <!-- PAGE TITLE -->
    <!-- END PAGE TITLE -->
    <!-- PAGE CONTENT WRAPPER -->
    <div class="page-content-wrap">
        <div class="row">
            <div class="col-md-12">
                <!-- START SIMPLE DATATABLE -->
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h3 class="panel-title">问题列表</h3>
                        <ul class="panel-controls">
                            <li>
                                <div class="pull-right">
                                    <button id="wallet-add-button" th:data-unitid="${unitId}" th:data-levelid="${levelId}" class="btn btn-primary"><span class="fa fa-plus-circle"></span> 新建问题</button>
                                </div>
                            </li>
                            <li><a href="#" class="panel-collapse"><span class="fa fa-angle-down"></span></a></li>
                            <li><a href="#" class="panel-refresh"><span class="fa fa-refresh"></span></a></li>
                            <li><a href="#" class="panel-remove"><span class="fa fa-times"></span></a></li>
                        </ul>
                    </div>
                    <div class="panel-body">
                        <div class="row">
                            <div class="col-md-3"  th:each="entity : ${questions}">
                                <!-- CONTACT ITEM -->
                                <div class="panel panel-default">
                                    <div class="panel-body profile">
                                        <div class="profile-image" >
                                            <img th:src="${entity.image}" th:if="${entity.image!=null}"/>
                                            <img th:src="@{/img/noImage.jpg}" th:if="${entity.image==null}"/>
                                        </div>
                                        <div class="profile-data">
                                            <div class="profile-data-name" th:text="${entity.title}"></div>
                                        </div>
                                        <div class="profile-controls">
                                                <a href="#" th:onclick="editQuestion(this)" th:data-id="${entity.id}" th:data-levelid="${levelId}" th:data-unitid="${unitId}" class="profile-control-left-top"><span class="fa fa-pencil"></span></a>
                                                <a href="#" th:onclick="editAnswer(this)" th:data-questionid="${entity.id}" th:data-levelid="${levelId}" th:data-unitid="${unitId}" class="profile-control-left-bottom"><span class="fa fa-plus"></span></a>
                                            <audio th:if="${entity.audio}!=null" th:id="audio+(${entityStat.index}+1)" th:src="${entity.audio}" preload="auto"></audio>
                                            <a th:if="${entity.audio}!=null" href="#" th:onclick="playAudio(this)" th:data-id="audio+(${entityStat.index}+1)"  class="profile-control-right"><span class="fa fa-volume-up"></span></a>
                                        </div>
                                    </div>
                                    <div class="panel-body">
                                        <div class="contact-info" >
                                            <p th:each="answer : ${entity.answers}">
                                                <small th:text="${answerStat.index+1}"></small>.
                                                <small th:text="${answer.title}" th:if="${answer.rightAnswer=='0'}"></small>
                                                <small class="text-success" th:text="${answer.title}" th:if="${answer.rightAnswer=='1'}"></small>
                                            </p>
                                        </div>
                                    </div>
                                </div>
                                <!-- END CONTACT ITEM -->
                            </div>
                        </div>
                    </div>
                </div>
                <!-- END SIMPLE DATATABLE -->
            </div>
        </div>
    </div>
    <!-- PAGE CONTENT WRAPPER -->

</div>
<!-- START PRELOADS -->
</body>

</html>
